<template>
    <div ref="chartDom" :style="{ width: '100%', height: '400px' }"></div>
</template>

<script setup>
    import * as echarts from 'echarts'
    import { onMounted, ref } from 'vue'

    const chartDom = ref()
    let chart

    const initChart = () => {
        chart = echarts.init(chartDom.value)
        chart.setOption({
            title: {
                text: '会员人数趋势',
                left: 'center'
            },
            tooltip: {
                show: true,
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['新增', '流失'],
                left: 'left'
            },
            xAxis: {
                name: '月份',
                type: 'category',
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'], 
                axisLabel: {
                interval: 0,
                }
            },
            yAxis: {
                name: '/人次',
                type: 'value'
            },
            toolbox: {
                show: true,
                feature: {
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            series: [
                {
                    name: '新增',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [50, 70, 90, 80, 100, 50, 40, 70, 60, 20, 30, 70,], // Example data
                    itemStyle: {
                        color: '#28A1FFB3'
                    }
                },
                {
                    name: '流失',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: [30, 40, 20, 60, 50, 30, 40, 10, 20, 60, 20, 40], // Example data
                    itemStyle: {
                        color: '#999999e0'
                    }
                }
            ]
        })
    }

    onMounted(() => {
        initChart()
    })
</script>

<style scoped>
/* Add any specific styles here */
</style>
